<script lang="ts" setup>
import toLine from '@/utils';
import type { ListOptions, ActionOptions } from './interface';

withDefaults(
  defineProps<{
    list: ListOptions[];
    actions: ActionOptions[];
  }>(),
  {},
);

const emits = defineEmits(['clickItem', 'clickAcition']);

const clickItem = (item: ListOptions, i: number) => {
  emits('clickItem', item, i);
};

const clickAcition = (item: ActionOptions, i: number) => {
  if (item.func) {
    item.func();
  } else {
    emits('clickAcition', item, i);
  }
};
</script>

<template>
  <el-tabs :stretch="true">
    <el-tab-pane v-for="(item, index) in list" :key="index" :label="item.title" @click="clickItem(item, index)">
      <el-scrollbar :max-height="300">
        <div v-for="(cont, i) in item.content" :key="i" class="container">
          <div v-if="cont.avatar" class="avatar">
            <el-avatar :src="cont.avatar" />
          </div>
          <div class="content">
            <div v-if="cont.title" class="title">
              <span>{{ cont.title }}</span>
              <el-tag v-if="cont.tag" :type="cont.tagType" size="small"> {{ cont.tag }} </el-tag>
            </div>
            <div v-if="cont.time" class="time">{{ cont.time }}</div>
            <div v-if="cont.desc" class="time">{{ cont.desc }}</div>
          </div>
        </div>
      </el-scrollbar>
      <div class="action">
        <div v-for="(item1, i) in actions" :key="i" class="action-item" @click="clickAcition(item1, i)">
          <div v-if="item1.icon" class="icon">
            <component :is="`el-icon-${toLine(item1.icon)}`"></component>
          </div>
          <div v-if="item1.text">{{ item1.text }}</div>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<style lang="scss" scoped>
.container {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  cursor: pointer;

  &:hover {
    background-color: #ecf5ff;
  }
  .avatar {
    flex: 1;
  }

  .content {
    flex: 3;
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .time {
      font-size: 12px;
      color: #999;
      margin-top: 3px;
    }
  }
}
.action {
  display: flex;
  height: 30px;
  align-items: center;
  border-top: 1px solid #e4e7ed;
  box-sizing: border-box;
  &-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    &:not(:last-child) {
      border-right: 1px solid #e4e7ed;
    }
    .icon {
      padding: 4px 5px 0 0;
    }
  }
}
</style>
